<template>
  <div class="container" ref="vanlist">
    <navbar
      :vaniconL="true"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="search"
      @clickLeft="clickLeft"
      @clickRight="clickRight"
    >{{$t('nodulelist.nav_title')}}</navbar>
    <van-sticky :offset-top="45">
      <transition name="van-slide-down">
        <van-search
          v-model="searchVal"
          v-show="searchFlag"
          show-action
          :placeholder="$t('covlist.enter_search')"
          @search="onSearch"
          @cancel="onCancel"
          @input="onInput"
        />
      </transition>
    </van-sticky>
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="$t('covlist.no_more')"
      :loading-text="$t('detailList.loading')"
      :immediate-check="false"
      offset="10"
      @load="onLoad"
    >
      <div class="list-child" v-for="(item,index) in covlist" :key="index">
        <p class="date">{{$t('covlist.upadte_date')}} {{item.createTime}}</p>
        <van-divider />
        <div class="child-box">
          <div class="left">
            <img class="logo" src="@/assets/images/lung1.png" alt />
            <div class="mes">
              <span class="name">{{item.realName}}</span>
              <span
                class="sex"
              >{{item.gender == '0' ? $t('covlist.female'):item.gender == '1' ? $t('covlist.male'): '*'}} {{item.age}} {{item.departmentName}}</span>
            </div>
          </div>
          <div class="right">
            <van-button
              type="primary"
              round
              size="small"
              color="linear-gradient(211deg, #5d5cbf 0%, #4775d9 100%)"
              @click="viewDetail(item)"
            >{{$t('covlist.view_dicom')}}</van-button>
            <van-button
              type="primary"
              round
              size="small"
              @click="viewReport(item)"
              color="linear-gradient(211deg, #5d5cbf 0%, #4775d9 100%)"
            >{{$t('covlist.view_report')}}</van-button>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import navbar from "@/components/navbar";
import { getCovList } from "@/api/covlist.js";
import { getPatient } from "@/api/noduleList.js";
import { Search } from "vant";
import { mapGetters } from "vuex";
export default {
  name: "noduleList",
  components: { navbar },
  data() {
    return {
      searchVal: null,
      searchFlag: false,
      loading: true,
      finished: false,
      covlist: [],
      pageNow: 1,
      pageSize: 8,
      lungid: 0
    };
  },
  computed: {
    ...mapGetters(["lunglistSite"])
  },
  watch: {},
  methods: {
    // 返回上一页
    clickLeft() {
      this.$router.replace({ path: "/readList" });
    },
    // 搜索
    clickRight() {
      this.searchFlag = !this.searchFlag;
    },
    onInput(val) {
      if (val == null || val == "") {
        this.searchVal = null;
        this.pageNow = 1;
      }
    },
    // 确认搜索
    onSearch(val) {
      let { pageNow, pageSize, lungid } = this;
      this.searchVal = val;
      this.pageNow = 1;
      this.loading = true;
      this.finished = false;
      this.covlist = [];
      this.onLoad();
    },
    // 取消
    onCancel() {
      this.searchFlag = false;
      this.searchVal = null;
      this.pageNow = 1;
      this.loading = true;
      this.finished = false;
      this.covlist = [];
      this.onLoad();
    },
    // 滑动加载
    async onLoad() {
      let { pageNow, pageSize, lungid, searchVal } = this;
      setTimeout(() => {
        getCovList(pageNow, pageSize, searchVal, lungid).then(res => {
          this.loading = false;
          if (res.status.code === 200) {
            let list = (res.data && res.data.patients) || [];
            if (pageNow > 1) {
              this.covlist = [...this.covlist, ...list];
            } else {
              this.covlist = list;
            }
            // 如果当前页数 = 总页数，则已经没有数据
            if (pageNow === res.data.pageAmount) {
              this.finished = true;
            }
            // 如果总页数大于当前页码，页码+1
            if (res.data.pageAmount > pageNow) {
              this.pageNow++;
            }
          }
        });
      }, 1000);
    },
    // 跳转
    viewDetail(item) {
      let id = item.id;
      getPatient(id).then(res => {
        if (res.status.code == 200) {
          let CTData = res.data.dsResult;
          if (CTData.length == 1) {
            this.$router.replace({
              path: "/lungDetail",
              query: {
                dsId: CTData[0].dsId,
                patientId: CTData[0].patientId
              }
            });
          } else if (CTData.length > 1 || CTData.length < 1) {
            this.$router.replace({
              path: "/lungList",
              query: {
                id: id
              }
            });
          }
        }
      });
    },
    // 报告
    viewReport(item) {
      let id = item.id;
      getPatient(id).then(res => {
        if (res.status.code == 200) {
          let CTData = res.data.dsResult;
          if (CTData.length == 1) {
            this.$router.replace({
              path: "/lungReport",
              query: {
                dsId: CTData[0].dsId,
                patientId: CTData[0].patientId
              }
            });
          } else if (CTData.length > 1 || CTData.length < 1) {
            this.$router.replace({
              path: "/lungList",
              query: {
                id: id
              }
            });
          }
        }
      });
    }
  },
  created() {
    this.onLoad();
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == "/readList") {
      let position = 0;
      this.$route.meta.keepAlive = false;
      this.$store.commit("position/SAVE_LUNG_POSITION", position);
      next();
    } else {
      let position = this.$refs.vanlist.scrollTop;
      this.$route.meta.keepAlive = true;
      this.$store.commit("position/SAVE_LUNG_POSITION", position);
      next();
    }
  },
  mounted() {},
  activated() {
    this.$nextTick(() => {
      let position = this.lunglistSite;
      this.$refs.vanlist.scrollTop = position;
    });
  },
  destroyed() {}
};
</script>
<style lang='scss' scoped>
.container {
  position: relative;
  height: 100vh;
  background: #f5f5f5;
  overflow-y: scroll;
  & .van-search {
    width: 100%;
    z-index: 1;
    box-shadow: rgb(204, 204, 204) 1px 1px 9px;
  }
  & .list-child {
    width: 94%;
    margin: auto;
    // height: 128px;
    background: #ffffff;
    border-radius: 10px;
    margin-top: 10px;
    padding: 0 15px;
    box-sizing: border-box;
    & .van-divider {
      margin: 0 0 10px 0;
    }
    & .child-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: .1rem;
      & .left {
        display: flex;
        flex-direction: row;
        & .logo {
          width: .6rem;
          height: .6rem;
          border-radius: 8px;
        }
        & .mes {
          display: flex;
          flex-direction: column;
          margin-left: .1rem;
          margin-top: 0.05rem;
        }
        & .name {
          font-size: .2rem;
          text-align: left;
          width: 1.2rem;
          height: .22rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        & .sex {
          font-size: .14rem;
          margin-top: .1rem;
          text-align: left;
        }
      }
      & .right {
        & .van-button {
          display: block;
          margin-bottom: 5px;
        }
      }
    }
    & .date {
      font-size: .12rem;
      color: #ccc;
      text-align: left;
      padding: .12rem 0;
    }
  }
}
</style>